<template>
    <XTable ref='tableRef' selection :api='chargeOrderPaginationApi' :columns='columns' @selectionChange='selectionChange'>
        <template #action='{row}'>
            <template v-if='row'>
                <router-link class='m-l-5' :to='"/device/edit/" + row.deviceId'>
                    <el-button type='text'>编辑</el-button>
                </router-link>
            </template>
        </template>
    </XTable>
</template>

<script lang='ts' setup>
    import { onActivated, reactive, ref } from 'vue'
    import { chargeOrderPaginationApi } from '../../api/chargeOrder'
    import { ElMessage } from 'element-plus'
    import { Column } from '../../type'

    const columns:Column[] = [
        {title : '订单号', dataIndex : 'orderNo', inFilter : true},
        {title : '设备号', dataIndex : 'deviceId', inFilter : true},
        {title : '端口号', dataIndex : 'portNo'},
    ]

    let selectedOrderIds = reactive([])
    const tableRef = ref()
    const isFirst = ref(true)

    function selectionChange(rows:any[]) {
        selectedOrderIds.splice(0)
        selectedOrderIds.push(...rows.map(row => row.deviceId))
    }

    onActivated(() => {
        if(isFirst.value) {
            isFirst.value = false
        }else {
            tableRef.value.load()
        }
    })

</script>